<script setup lang="ts">
import { Question } from '@/api/subject/type';
import { showToast } from 'vant';
import { ref } from 'vue';

const question = ref({} as Question);
const emit = defineEmits(["submit"]);
const isMultipleChoice = ref(false);
const options = ref(['']);
const checkbox = ref([false]);
const radiobox = ref(-1);
const addOption = () => {
    options.value.push('');
    checkbox.value.push(false);
}

const removeOption = (index: number) => {
    options.value.splice(index, 1);
}

const submit = () => {
    if (isMultipleChoice.value) {
        question.value.answer = JSON.stringify({
            isMultiple: isMultipleChoice.value,
            options: options.value,
            correctAnswer: checkbox.value
        });
    } else {
        question.value.answer = JSON.stringify({
            isMultiple: isMultipleChoice.value,
            options: options.value,
            correctAnswer: [radiobox.value]
        });
    }
    if (!question.value.title || !question.value.title.trim()) {
    showToast('题目描述不能为空');
    return;
  }
    if (options.value.length < 2) {
    showToast('请至少添加2个选项');
    return;
  }
    if (options.value.some((opt) => !opt.trim())) {
    showToast('选项内容不能为空');
    return;
  }
  if (isMultipleChoice.value) {
    // 多选时，checkbox.value是boolean数组，比如[true, false, true]等
    // 如果全部是false，说明没选任何正确答案
    const hasAnyTrue = checkbox.value.some(b => b);
    if (!hasAnyTrue) {
      showToast('请至少选择一个正确答案');
      return;
    }
  } else {
    // 单选时，radiobox.value是被选中的下标，若为-1表示没选
    if (radiobox.value < 0) {
      showToast('请选择正确答案');
      return;
    }
  }
  // 4. 准备好 question.value 的 answer 字段
  if (isMultipleChoice.value) {
    question.value.answer = JSON.stringify({
      isMultiple: true,
      options: options.value,
      correctAnswer: checkbox.value, // [true, false, true] 等
    });
  } else {
    question.value.answer = JSON.stringify({
      isMultiple: false,
      options: options.value,
      correctAnswer: [radiobox.value], // [2] 表示第3个选项正确
    });
  }
    question.value.type = 'Choice';
    emit('submit', question.value);
}
</script>

<template>
    <div class="form">
        <van-field v-model="question.title" label="题目描述" required type="textarea" rows="3" placeholder="请输入题目描述" />
        <van-field name="questionType" label="题目类型">
            <template #input>
                <van-radio-group v-model="isMultipleChoice" direction="horizontal">
                    <van-radio :name="false">单选题</van-radio>
                    <van-radio :name="true">多选题</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <div class="options">
            <div v-for="(_option, index) in options" :key="index" class="option-item">
                <van-field
                    v-model="options[index]"
                    :label="'选项' + String.fromCharCode(65 + index)"
                    placeholder="请输入选项内容"
                >
                    <template #button>
                        <van-button size="small" type="danger" @click="removeOption(index)">删除</van-button>
                    </template>
                </van-field>
            </div>
            <div class="add-option">
                <van-button type="primary" block @click="addOption">添加选项</van-button>
            </div>
        </div>
        <van-field name="correctAnswer" label="正确答案">
            <template #input>
                <van-checkbox-group v-if="isMultipleChoice" v-model="checkbox" direction="horizontal">
                    <van-checkbox v-for="(_, index) in options" :key="index" :name="index.toString()">
                        {{ String.fromCharCode(65 + index) }}
                    </van-checkbox>
                </van-checkbox-group>
                <van-radio-group v-else v-model="radiobox" direction="horizontal">
                    <van-radio
                        v-for="(_, index) in options"
                        :key="index"
                        :name="index"
                    >
                        {{ String.fromCharCode(65 + index) }}
                    </van-radio>
                </van-radio-group>
            </template>
        </van-field>
        <div class="submit">
            <van-button type="primary" block @click="submit">提交</van-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.options {
    margin: 16px 0;
    .option-item {
        margin-bottom: 8px;
    }
    .add-option {
        margin-top: 16px;
    }
}
.submit {
    margin-top: 24px;
}
</style>